<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一键询价</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/sq.css" media="all">
    <style type="text/css">
        body{
        }
        #mainContainer{
            padding: 10px;
            overflow: hidden;
        }
        #formContainer{
            background-color: #FFF;
            padding: 10px;
        }
        .layui-form-label{
            width: 60px;
        }
        #demo2 img{
            height: 100px;
        }
    </style>
</head>
<body>
<div id="mainContainer">
    <div class="layui-elem-quote" style="background-color: #FFF;background-color: #ebfefb;">
        请输入您的姓名、联系电话、地址、选择设备类目。为了方便报价，您也可以对询价的实物物品进行拍照。
    </div>
    <div id="formContainer">
        <div style="width: 96%;">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">联系人</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备类别</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required" lay-filter="machType">
                            <option value=""></option>
                            <option value="0">大型设备</option>
                            <option value="1">掘进机设备</option>
                            <option value="2">排风设备</option>
                            <option value="3">某某设备</option>
                            <option value="4">其他设备</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">照片</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <a class="layui-btn layui-btn-warm layui-btn-radius" id="uploadimgbt">添加照片</a>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <div class="layui-upload-list" id="demo2"></div>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">产品描述</label>
                    <div class="layui-input-block">
                        <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <ul class="ts-container" id="comUL">

    </ul>
</div>
<div id="bottomContent">
    <ul id="bottomUL">
        <li >
            <i class="layui-icon" onclick="window.location.href='index.html'">&#xe68e;</i>
            <br><span>首页</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='ddlist.html'">&#xe63c;</i>
            <br><span>订单</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='cart.html'">&#xe657;</i>
            <br><span>购物车</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='my.html'">&#xe612;</i>
            <br><span>我的</span>
        </li>
    </ul>
</div>
<!--下方为模板部分-->
<!--用户登陆的模板-->
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" language="JavaScript"></script>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/echarts.min.js"></script>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        form.on('select(machType)', function(data){
            console.log(data.value);
        });
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

    });
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //多图片上传
        upload.render({
            elem: '#uploadimgbt'
            ,url: '/upload/'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                //上传完毕
            }
        });
    });
</script>
</html>